<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
  <style type="text/css">
    canvas{
      border: 1px solid #626262;
    }
  </style>
  </head>
  <canvas width="600" height="500">您的浏览器支持cancas！！</canvas>
  <body>
<script type="text/javascript">
	var cas= document.querySelector("canvas");
    console.log(cas);
	var ctx=cas.getContext("2d");
   console.log(ctx);
    //矩形
    ctx.fillStyle="#f60";
    ctx.fillRect(10,10,90,60);
    //开始路径  画三角形
    ctx.beginPath();
    //移动画笔
    ctx.fillStyle="#983";
    ctx.moveTo(120,30);
    ctx.lineTo(150,30);
    ctx.lineTo(150,120);
    ctx.closePath();
    ctx.fill();
    //圆形
    ctx.beginPath();
    ctx.moveTo(190,200);
    ctx.fillStyle="#361";
    ctx.arc(190,200,60,hudu(0),hudu(90));
    ctx.closePath();
    ctx.fill();
    function hudu(pi){
        return pi*Math.PI/180;
    }
    ctx.font="20px pinghei";
    ctx.textAlign="center";
    ctx.fillStyle="#402";
    ctx.fillText("我的demo",360,30);
    //画图片
    var img=new Image();
    img.src="1.jpg";
    img.onload=function(){
        ctx.drawImage(img,300,200,200,300);
    }
</script>
  </body>
</html>
